<template>
  <el-form
    :model="addEditForm"
    ref="addEditForm"
    label-width="85px"
    label-position="left"
    class="pg-shaohuo-person-add-edit-exam">
    <el-dialog
      :title="`${type}考试题目`"
      :before-close="beforeDialogClose"
      :visible.sync="dialogVisible"
      width="50%">
      <!-- 表单主题
      -------------------------- -->
      <el-form-item 
        label="考试题目"
        prop="title"
        :rules="{ required: true, message: '请输入考试题目', trigger: 'blur' }">
        <el-input v-model="addEditForm.title"></el-input>
      </el-form-item>

      <!-- 正确答案
      -------------------------- -->
      <el-form-item label="正确答案"
        prop="answer"
        :rules="{ required: true, message: '至少选择一项答案', trigger: 'blur' }">
        <el-checkbox-group v-model="addEditForm.answer">
          <el-checkbox
            v-for="(option, index) in addEditForm.options"
            :key="index"
            :label="ANSWER_LIST[index]"
            name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 选择的选项
      -------------------------- -->
      <el-form-item
        v-for="(option, index) in addEditForm.options"
        :key="index"
        :prop="'options.' + index + '.value'"
        :rules="{ required: true, message: '选项不能为空', trigger: 'blur' }"
        :label="`选项${ANSWER_LIST[index] || 'X'}`">
        <el-input v-model="option.value"
          placeholder="请输入选项"></el-input>

        <el-button
          v-if="index !== 0"
          class="pg-shaohuo-person-add-edit-exam__delete"
          @click="deleteOption(index)"
          type="text" 
          icon="el-icon-delete"></el-button>
      </el-form-item>

      <!-- 添加模板按钮
      -------------------------- -->
      <el-button 
        @click="addOption"
        :disabled="addEditForm.options.length >= ANSWER_LIST.length"
        type="text" icon="el-icon-plus">
        添加选项
      </el-button>
      
      <!-- 底部按钮区
      -------------------------- -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary"
          @click="submitForm"
          :loading="loadingBtn === '确定'">确 定</el-button>
      </span>
    </el-dialog>
  </el-form>
</template>

<script>
import { ShaohuoPersonService } from 'services/Api'
import {
  btnLoadingMixin,
  formAddEditMixin,
  dialogCoreMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgTypeAddtype',
  mixins: [
    btnLoadingMixin,
    formAddEditMixin,
    dialogCoreMixin
  ],
  data () {
    return {
      ANSWER_LIST: [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J' ],
      addEditForm: {
        title: '',
        answer: [],
        options: [{ // 类型名字
          value: ''
        }]
      }
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    // 添加新捎货试题参数
    addShaohuoProblemParam () {
      return {
        acc_id: this.acc_id,
        title: this.addEditForm.title,
        answer: this.addEditForm.answer.map(i => this.ANSWER_LIST.indexOf(i) + 1).join('|'),
        type: this.addEditForm.answer.length > 1 ? '1' : '0',
        options: this.addEditForm.options.map(i => i.value.trim()).join('|')
      }
    },
    // 修改捎货试题的内容参数
    alterShaohuoProblemParam () {
      return {
        acc_id: this.acc_id,
        sp_id: this.editData.sp_id,
        title: this.addEditForm.title,
        answer: this.addEditForm.answer.map(i => this.ANSWER_LIST.indexOf(i) + 1).join('|'),
        type: this.addEditForm.answer.length > 1 ? '1' : '0',
        options: this.addEditForm.options.map(i => i.value.trim()).join('|')
      }
    }
  },
  methods: {
    // 关闭弹窗前重置表单
    beforeDialogClose (done) {
      if (done) done()
      this.isEditing = false
      this.resetForm()
      this.addEditForm = {
        title: '',
        answer: [],
        options: [{ // 类型名字
          value: ''
        }]
      }
    },
    // formAddEditMixin需要 - 编辑时将传入的源数据写入当前表单
    editDataHandler (v) {
      this.addEditForm.title = v.title || ''
      this.addEditForm.answer = v.answer.split('')
      this.addEditForm.options = v.options
        .map(i => { return { value: i.description.slice(2) } }) // 去掉开头的字母加冒号
    },
    // formAddEditMixin需要 - 提交成功后的操作
    afterSubmitSuccess () {
      this.dialogComplete()
    },
    // 删除选项
    deleteOption (index) {
      this.addEditForm.options.splice(index, 1)
      // 判断answer是否已选择该选项，有则删除
      this.addEditForm.answer = this.addEditForm.answer.filter(i => {
        return this.ANSWER_LIST[index] !== i
      })
    },
    // 添加选项
    addOption () {
      const newOption = { value: '' }
      this.addEditForm.options.push(newOption)
    },
    // 添加新的捎货类型接口
    currentAddApi () {
      return ShaohuoPersonService.addShaohuoProblem(this.addShaohuoProblemParam)
    },
    // 编辑捎货类型接口
    currentEditApi () {
      return ShaohuoPersonService.alterShaohuoProblem(this.alterShaohuoProblemParam)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-person-add-edit-exam) {
  .el-form-item__content > .el-input {
    width: 80%;
  }
  @include e(delete) {
    padding-left: $--padding-base;
  }
}
</style>
